<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue组件化编程 | 川哥编程路</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/blog/image/favicon.ico">
    <link rel="stylesheet" href="/blog/css/style.css">
    <meta name="description" content="日拱一卒无有尽，功不唐捐终入海">
    
    <link rel="preload" href="/blog/assets/css/0.styles.797dfc43.css" as="style"><link rel="preload" href="/blog/assets/js/app.160d1732.js" as="script"><link rel="preload" href="/blog/assets/js/2.553eb4dc.js" as="script"><link rel="preload" href="/blog/assets/js/29.6df73fc7.js" as="script"><link rel="preload" href="/blog/assets/js/3.4c6b6694.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.33b61760.js"><link rel="prefetch" href="/blog/assets/js/11.e936ed72.js"><link rel="prefetch" href="/blog/assets/js/12.06a8905b.js"><link rel="prefetch" href="/blog/assets/js/13.43d57349.js"><link rel="prefetch" href="/blog/assets/js/14.9a947fce.js"><link rel="prefetch" href="/blog/assets/js/15.00675827.js"><link rel="prefetch" href="/blog/assets/js/16.4240201a.js"><link rel="prefetch" href="/blog/assets/js/17.4e8e9f2d.js"><link rel="prefetch" href="/blog/assets/js/18.c0804ecf.js"><link rel="prefetch" href="/blog/assets/js/19.e374c696.js"><link rel="prefetch" href="/blog/assets/js/20.dc1f2462.js"><link rel="prefetch" href="/blog/assets/js/21.2550a5e8.js"><link rel="prefetch" href="/blog/assets/js/22.64bef411.js"><link rel="prefetch" href="/blog/assets/js/23.56de7058.js"><link rel="prefetch" href="/blog/assets/js/24.7de4d292.js"><link rel="prefetch" href="/blog/assets/js/25.3483b9cb.js"><link rel="prefetch" href="/blog/assets/js/26.81508f46.js"><link rel="prefetch" href="/blog/assets/js/27.f884547d.js"><link rel="prefetch" href="/blog/assets/js/28.fc8f3edd.js"><link rel="prefetch" href="/blog/assets/js/30.92ddc0da.js"><link rel="prefetch" href="/blog/assets/js/31.bc595735.js"><link rel="prefetch" href="/blog/assets/js/32.f6ddf561.js"><link rel="prefetch" href="/blog/assets/js/33.ba353a20.js"><link rel="prefetch" href="/blog/assets/js/34.23530c8e.js"><link rel="prefetch" href="/blog/assets/js/35.98587bae.js"><link rel="prefetch" href="/blog/assets/js/4.e380c258.js"><link rel="prefetch" href="/blog/assets/js/5.9b25da44.js"><link rel="prefetch" href="/blog/assets/js/6.3d19bdbc.js"><link rel="prefetch" href="/blog/assets/js/7.b8795dc7.js"><link rel="prefetch" href="/blog/assets/js/8.9332e1e8.js"><link rel="prefetch" href="/blog/assets/js/9.875f1e10.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.797dfc43.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">川哥编程路</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="php" class="dropdown-title"><span class="title">php</span> <span class="arrow down"></span></button> <button type="button" aria-label="php" class="mobile-dropdown-title"><span class="title">php</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/php/base/" class="nav-link">
  通用篇
</a></li><li class="dropdown-item"><!----> <a href="/blog/php/laravel/" class="nav-link">
  Laravel
</a></li><li class="dropdown-item"><!----> <a href="/blog/php/skill/" class="nav-link">
  技巧篇
</a></li></ul></div></div><div class="nav-item"><a href="/blog/nginx/" class="nav-link">
  nginx
</a></div><div class="nav-item"><a href="/blog/print/" class="nav-link">
  print
</a></div><div class="nav-item"><a href="/blog/mysql/" class="nav-link">
  mysql
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="web" class="dropdown-title"><span class="title">web</span> <span class="arrow down"></span></button> <button type="button" aria-label="web" class="mobile-dropdown-title"><span class="title">web</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/web/layout/" class="nav-link">
  css布局
</a></li><li class="dropdown-item"><!----> <a href="/blog/web/case/" class="nav-link">
  css实例
</a></li></ul></div></div><div class="nav-item"><a href="/blog/js/" class="nav-link">
  js
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="python" class="dropdown-title"><span class="title">python</span> <span class="arrow down"></span></button> <button type="button" aria-label="python" class="mobile-dropdown-title"><span class="title">python</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/python/base/" class="nav-link">
  python基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/python/machine/" class="nav-link">
  机器学习
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Golang" class="dropdown-title"><span class="title">Golang</span> <span class="arrow down"></span></button> <button type="button" aria-label="Golang" class="mobile-dropdown-title"><span class="title">Golang</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/go/env/" class="nav-link">
  前言和环境
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/grammar/" class="nav-link">
  语法基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/base/" class="nav-link">
  函数和数组(切片)
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/map/" class="nav-link">
  Map,指针,值传递,引用传递
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/struct/" class="nav-link">
  结构体
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/gin/" class="nav-link">
  Gin
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/concurrent/" class="nav-link">
  go并发
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/standard/" class="nav-link">
  常用标准库
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/skills/" class="nav-link">
  技巧篇
</a></li></ul></div></div><div class="nav-item"><a href="/blog/docker/" class="nav-link">
  docker
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue" class="dropdown-title"><span class="title">vue</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue" class="mobile-dropdown-title"><span class="title">vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/vue/base/" class="nav-link">
  vue基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/assembly/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  组件化编程
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/problem/" class="nav-link">
  problem
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/uniApp/" class="nav-link">
  uniApp
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tool/" class="nav-link">
  tool
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="php" class="dropdown-title"><span class="title">php</span> <span class="arrow down"></span></button> <button type="button" aria-label="php" class="mobile-dropdown-title"><span class="title">php</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/php/base/" class="nav-link">
  通用篇
</a></li><li class="dropdown-item"><!----> <a href="/blog/php/laravel/" class="nav-link">
  Laravel
</a></li><li class="dropdown-item"><!----> <a href="/blog/php/skill/" class="nav-link">
  技巧篇
</a></li></ul></div></div><div class="nav-item"><a href="/blog/nginx/" class="nav-link">
  nginx
</a></div><div class="nav-item"><a href="/blog/print/" class="nav-link">
  print
</a></div><div class="nav-item"><a href="/blog/mysql/" class="nav-link">
  mysql
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="web" class="dropdown-title"><span class="title">web</span> <span class="arrow down"></span></button> <button type="button" aria-label="web" class="mobile-dropdown-title"><span class="title">web</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/web/layout/" class="nav-link">
  css布局
</a></li><li class="dropdown-item"><!----> <a href="/blog/web/case/" class="nav-link">
  css实例
</a></li></ul></div></div><div class="nav-item"><a href="/blog/js/" class="nav-link">
  js
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="python" class="dropdown-title"><span class="title">python</span> <span class="arrow down"></span></button> <button type="button" aria-label="python" class="mobile-dropdown-title"><span class="title">python</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/python/base/" class="nav-link">
  python基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/python/machine/" class="nav-link">
  机器学习
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Golang" class="dropdown-title"><span class="title">Golang</span> <span class="arrow down"></span></button> <button type="button" aria-label="Golang" class="mobile-dropdown-title"><span class="title">Golang</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/go/env/" class="nav-link">
  前言和环境
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/grammar/" class="nav-link">
  语法基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/base/" class="nav-link">
  函数和数组(切片)
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/map/" class="nav-link">
  Map,指针,值传递,引用传递
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/struct/" class="nav-link">
  结构体
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/gin/" class="nav-link">
  Gin
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/concurrent/" class="nav-link">
  go并发
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/standard/" class="nav-link">
  常用标准库
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/skills/" class="nav-link">
  技巧篇
</a></li></ul></div></div><div class="nav-item"><a href="/blog/docker/" class="nav-link">
  docker
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue" class="dropdown-title"><span class="title">vue</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue" class="mobile-dropdown-title"><span class="title">vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/vue/base/" class="nav-link">
  vue基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/assembly/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  组件化编程
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/problem/" class="nav-link">
  problem
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/uniApp/" class="nav-link">
  uniApp
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tool/" class="nav-link">
  tool
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span></span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/vue/assembly/" aria-current="page" class="active sidebar-link">Vue组件化编程</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_1-理解组件" class="sidebar-link">1. 理解组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_1-1-传统的代码编写方式存在的问题" class="sidebar-link">1.1 传统的代码编写方式存在的问题</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_1-2-组件" class="sidebar-link">1.2 组件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_1-3-模块" class="sidebar-link">1.3 模块</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_1-4-模块化" class="sidebar-link">1.4 模块化</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_1-5-组件化" class="sidebar-link">1.5 组件化</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_2-组件的基本使用" class="sidebar-link">2. 组件的基本使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_2-1-组件的两种编写形式" class="sidebar-link">2.1 组件的两种编写形式</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_2-2-创建组件的步骤" class="sidebar-link">2.2 创建组件的步骤</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_2-3-如何定义组件" class="sidebar-link">2.3 如何定义组件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_2-4-如何注册组件" class="sidebar-link">2.4 如何注册组件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_2-5-如何使用组件-写组件标签" class="sidebar-link">2.5 如何使用组件(写组件标签)</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_2-6-demo" class="sidebar-link">2.6 demo</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_3-组件命名规则" class="sidebar-link">3. 组件命名规则</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_3-1-一个单词组成的组件名" class="sidebar-link">3.1 一个单词组成的组件名</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_3-2-多单词组成的组件名" class="sidebar-link">3.2 多单词组成的组件名</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_3-3-关于组件标签" class="sidebar-link">3.3 关于组件标签</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_3-4-组件的简写方式" class="sidebar-link">3.4 组件的简写方式</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_4-组件的嵌套" class="sidebar-link">4. 组件的嵌套</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_5-两个地方的理解" class="sidebar-link">5.  两个地方的理解</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_5-1-vuecomponent的理解" class="sidebar-link">5.1 VueComponent的理解</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_5-2-一个重要内置关系的理解" class="sidebar-link">5.2 一个重要内置关系的理解</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_6-单文件组件" class="sidebar-link">6. 单文件组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_6-1-单文件组件命名" class="sidebar-link">6.1 单文件组件命名</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_6-2-app-vue" class="sidebar-link">6.2 App.vue</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_6-3-school-vue" class="sidebar-link">6.3 School.vue</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_6-4-student-vue" class="sidebar-link">6.4 Student.vue</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_6-5-main-js" class="sidebar-link">6.5 main.js</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_6-6-index-html" class="sidebar-link">6.6 index.html</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_7-vue脚手架-vue-cli" class="sidebar-link">7. Vue脚手架(Vue-cli)</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_7-1-安装vue-cli" class="sidebar-link">7.1 安装vue-cli</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_7-2-创建项目" class="sidebar-link">7.2 创建项目</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_7-3-启动项目" class="sidebar-link">7.3 启动项目</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_7-4-升级全局的vue-cli" class="sidebar-link">7.4  升级全局的Vue-cli</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_8-项目目录文件介绍" class="sidebar-link">8. 项目目录文件介绍</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_8-1-gitignore文件" class="sidebar-link">8.1 .gitignore文件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_8-2-babel-config-js文件" class="sidebar-link">8.2 babel.config.js文件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_8-3-package-json文件" class="sidebar-link">8.3 package.json文件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_8-4-package-lock-json文件" class="sidebar-link">8.4 package-lock.json文件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_8-5-readme-md文件" class="sidebar-link">8.5 README.md文件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_8-6-src-main-js文件" class="sidebar-link">8.6 src/main.js文件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_8-7-src-app-vue文件" class="sidebar-link">8.7 src/App.vue文件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_8-8-assets文件夹" class="sidebar-link">8.8 assets文件夹</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_8-9-components文件夹" class="sidebar-link">8.9 components文件夹</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_8-10-public-index-html文件" class="sidebar-link">8.10 public/index.html文件</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_9-render函数" class="sidebar-link">9. render函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_9-1-关于不同版本的vue" class="sidebar-link">9.1 关于不同版本的Vue</a></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_9-2-示例说明main-js中render函数" class="sidebar-link">9.2 示例说明main.js中render函数</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/vue/assembly/#_10-全局cli配置" class="sidebar-link">10. 全局CLI配置</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue组件化编程"><a href="#vue组件化编程" class="header-anchor">#</a> Vue组件化编程</h1> <h2 id="_1-理解组件"><a href="#_1-理解组件" class="header-anchor">#</a> 1. 理解组件</h2> <h3 id="_1-1-传统的代码编写方式存在的问题"><a href="#_1-1-传统的代码编写方式存在的问题" class="header-anchor">#</a> 1.1 传统的代码编写方式存在的问题</h3> <ol><li>依赖关系混乱, 不好维护</li> <li>代码复用率不高</li></ol> <h3 id="_1-2-组件"><a href="#_1-2-组件" class="header-anchor">#</a> 1.2 组件</h3> <ol><li>组件的定义:  实现应用中<font color="red">局部</font>功能<font color="red">代码(css,js,html)</font>和<font color="red">资源</font>的<font color="red">集合</font>;</li> <li>为什么: 一个界面的功能很复杂</li> <li>作用:   复用编码, 简化项目编码, 提高运行效率</li></ol> <h3 id="_1-3-模块"><a href="#_1-3-模块" class="header-anchor">#</a> 1.3 模块</h3> <ol><li>理解: 向外提供特定功能的js程序, 一般就是一个js文件</li> <li>为什么: js文件很多很复杂</li> <li>作用:   复用js, 简化js的编写, 提高js运行效率</li></ol> <h3 id="_1-4-模块化"><a href="#_1-4-模块化" class="header-anchor">#</a> 1.4 模块化</h3> <p>当应用中的js都以模块来编写, 那这个应用就是一个模块化的应用</p> <h3 id="_1-5-组件化"><a href="#_1-5-组件化" class="header-anchor">#</a> 1.5 组件化</h3> <p>当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用</p> <h2 id="_2-组件的基本使用"><a href="#_2-组件的基本使用" class="header-anchor">#</a> 2. 组件的基本使用</h2> <h3 id="_2-1-组件的两种编写形式"><a href="#_2-1-组件的两种编写形式" class="header-anchor">#</a> 2.1 组件的两种编写形式</h3> <div class="custom-block tip"><p class="custom-block-title">定义组件,又叫创建组件</p> <p>Vue中, 组件是有两种编写形式的:</p> <ol><li>第一种叫非单文件组件,一个文件中包含有n个组件, 比如,a.html中包含多个组件</li> <li>第二种叫单文件组件,一个文件中只包含1个组件, 比如,a.vue中只能是一个组件, 1个.vue文件就是一个组件;</li> <li>项目中都是用单文件组件: 条理清楚, 代码好维护</li></ol></div> <h3 id="_2-2-创建组件的步骤"><a href="#_2-2-创建组件的步骤" class="header-anchor">#</a> 2.2 创建组件的步骤</h3> <div class="custom-block warning"><p class="custom-block-title">Vue中使用组件的三大步骤</p> <ol><li>定义组件(创建组件)</li> <li>注册组件</li> <li>使用组件(写组件标签)</li></ol></div> <h3 id="_2-3-如何定义组件"><a href="#_2-3-如何定义组件" class="header-anchor">#</a> 2.3 如何定义组件</h3> <div class="custom-block danger"><p class="custom-block-title">如何定义组件</p> <p>使用Vue.extend(options)创建, 其中options和new Vue(options)时传入的那个options几乎一样, 但区别如下:</p> <ol><li>el不要写, 为什么? 最终所有的组件都要经过一个vm的管理, 由vm中的el决定服务哪个容器;</li> <li>data必须写成函数, 为什么? 避免组件被复用时, 数据存在引用关系;</li> <li>使用template可以配置组件结构</li></ol></div> <h3 id="_2-4-如何注册组件"><a href="#_2-4-如何注册组件" class="header-anchor">#</a> 2.4 如何注册组件</h3> <div class="custom-block tip"><p class="custom-block-title">注册组件</p> <ol><li>局部注册: 用new Vue的时候传入components选项</li> <li>全局注册: 用Vue.component('组件名',组件)</li></ol></div> <h3 id="_2-5-如何使用组件-写组件标签"><a href="#_2-5-如何使用组件-写组件标签" class="header-anchor">#</a> 2.5 如何使用组件(写组件标签)</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>school</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>school</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_2-6-demo"><a href="#_2-6-demo" class="header-anchor">#</a> 2.6 demo</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>基本使用<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../js/vue.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--准备好一个容器--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>root<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!--    第三步: 编写组件标签--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hello</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>hello</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>xue-sh-eng</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>xue-sh-eng</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>school</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>school</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>xue-sh-eng</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>xue-sh-eng</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hello</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>hello</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>root1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hello</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>hello</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span>
    <span class="token comment">//  第一步: 创建school组件(调用extend这个api)</span>
    <span class="token keyword">const</span> hello <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token comment">// el: '#root',</span>
      <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
          &lt;div&gt;
            &lt;h2&gt;{{hello}}&lt;/h2&gt;
          &lt;/div&gt;
        </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
      <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'您好, 我亲爱的中国'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token keyword">const</span> school <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token comment">// el: '#root',</span>
      <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
          &lt;div&gt;
            &lt;h2&gt;学校名称: {{schoolName}}&lt;/h2&gt;
            &lt;h2&gt;学校地址: {{address}}&lt;/h2&gt;
            &lt;button @click=&quot;showName&quot;&gt;点我提示学校名称&lt;/button&gt;
          &lt;/div&gt;
        </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
      <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">schoolName</span><span class="token operator">:</span> <span class="token string">'北京大学'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">'北京市'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function">showName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>schoolName<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token comment">//  第一步: 创建student组件</span>
    <span class="token keyword">const</span> student12 <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
          &lt;div&gt;
            &lt;h2&gt;学生姓名: {{studentName}}&lt;/h2&gt;
            &lt;h2&gt;学生年龄: {{age}}&lt;/h2&gt;
          &lt;/div&gt;
        </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
      <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">studentName</span><span class="token operator">:</span> <span class="token string">'翠花'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">//第二步: 全局注册组件, 其实局部注册用得比较多</span>
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">,</span> hello<span class="token punctuation">)</span>

    <span class="token comment">//创建vm</span>
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#root'</span><span class="token punctuation">,</span>
      <span class="token comment">// 第二步: 局部注册组件components</span>
      <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 组件名:上面创建的组件变量名称,尽量一样, 可以简写为school</span>
        school<span class="token punctuation">,</span> <span class="token comment">//组件名称和后面一样, 可以简写</span>
        <span class="token literal-property property">xueShEng</span><span class="token operator">:</span> student12<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">hobby</span><span class="token operator">:</span> <span class="token string">'唱歌'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#root1'</span><span class="token punctuation">,</span>
      <span class="token comment">// 第二步: 局部注册组件components</span>
      <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">xueShEng</span><span class="token operator">:</span> student12<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br></div></div><h2 id="_3-组件命名规则"><a href="#_3-组件命名规则" class="header-anchor">#</a> 3. 组件命名规则</h2> <h3 id="_3-1-一个单词组成的组件名"><a href="#_3-1-一个单词组成的组件名" class="header-anchor">#</a> 3.1 一个单词组成的组件名</h3> <ol><li>第一种写法：（首字母小写）school 用的时候首字母小写</li> <li>第二种写法：（首字母大写）School 用的时候首字母大写</li></ol> <h3 id="_3-2-多单词组成的组件名"><a href="#_3-2-多单词组成的组件名" class="header-anchor">#</a> 3.2 多单词组成的组件名</h3> <ol><li>第一种：（kebab-case）： my-school 使用时候一样</li> <li>第二种： 驼峰 MySchool 必须在脚手架才能用</li></ol> <h3 id="_3-3-关于组件标签"><a href="#_3-3-关于组件标签" class="header-anchor">#</a> 3.3 关于组件标签</h3> <ol><li>第一种写法: <code>&lt;school&gt;&lt;/school&gt;</code></li> <li>第二种写法: <code>&lt;school/&gt;</code></li> <li>备注: 不用使用脚手架时, <school></school>会导致后续组件不能渲染</li></ol> <h3 id="_3-4-组件的简写方式"><a href="#_3-4-组件的简写方式" class="header-anchor">#</a> 3.4 组件的简写方式</h3> <p><code>const school = Vue.extend(options) 可以简写为 const school = options</code></p> <div class="custom-block warning"><p class="custom-block-title">注意了</p> <ol><li>组件名尽可能回避HTML中已有的元素名称, 例如: h2, H2都不行</li> <li>可以使用name配置项指定组件在开发者工具中呈现的名字</li></ol></div> <h2 id="_4-组件的嵌套"><a href="#_4-组件的嵌套" class="header-anchor">#</a> 4. 组件的嵌套</h2> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>组件的嵌套<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../js/vue.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--准备好一个容器--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>root<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!--        &lt;app&gt;&lt;/app&gt;--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span>

      <span class="token comment">//  定义student组件</span>
      <span class="token keyword">const</span> student <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token comment">// el: '#root',</span>
        <span class="token comment">// 可以使用name配置项指定组件在开发者工具中呈现的名字</span>
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'student'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
          &lt;div&gt;
            &lt;h2&gt;姓名: {{name}}&lt;/h2&gt;
            &lt;h2&gt;年龄: {{age}}&lt;/h2&gt;
          &lt;/div&gt;
        </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'张三'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token comment">//  第一步: 创建school组件(调用extend这个api)</span>
      <span class="token keyword">const</span> school <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token comment">// el: '#root',</span>
        <span class="token comment">// 可以使用name配置项指定组件在开发者工具中呈现的名字</span>
        <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
          &lt;div&gt;
            &lt;h2&gt;学校名称: {{name}}&lt;/h2&gt;
            &lt;h2&gt;学校地址: {{address}}&lt;/h2&gt;
            &lt;student&gt;&lt;/student&gt;
          &lt;/div&gt;
        </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'四川大学'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">'四川省成都市'</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 组件中局部注册组件 子组件注册给谁, 就在谁里面写子组件</span>
        <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          student<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">const</span> hello <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
            &lt;h1&gt;{{msg}}&lt;/h1&gt;
        </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'欢迎学习vue'</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token comment">// 定义一个总的app组件, 管理所有组件</span>
      <span class="token keyword">const</span> app <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
              &lt;div&gt;
                  &lt;hello&gt;&lt;/hello&gt;
                 &lt;school&gt;&lt;/school&gt;
              &lt;/div&gt;

            </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          hello<span class="token punctuation">,</span>
          school<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>

      <span class="token comment">//创建vm</span>
      <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'&lt;app&gt;&lt;/app&gt;'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#root'</span><span class="token punctuation">,</span>
        <span class="token comment">// 第二步: 局部注册组件components</span>
        <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          app<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br></div></div><h2 id="_5-两个地方的理解"><a href="#_5-两个地方的理解" class="header-anchor">#</a> 5.  两个地方的理解</h2> <h3 id="_5-1-vuecomponent的理解"><a href="#_5-1-vuecomponent的理解" class="header-anchor">#</a> 5.1 VueComponent的理解</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <ol><li>school 组件本质是一个名为VueComponent的构造函数, 且不是程序员定义的, 是Vue.extend生成的</li> <li>我们只需要写<school></school>或<school></school>, Vue解析时会帮我们创建school组件的实例对象, 即Vue帮我们执行的: new VueComponent(options);</li> <li>特别注意: 每次调用Vue.extend, 返回的都是一个全新的VueCompient !!!</li> <li>关于this指向
<ol><li>组件配置中: data函数, methods中的函数, watch中的函数, computed中的函数, 他们的this均是VueComponen</li> <li>new Vue()配置中, data函数, methods中的函数, watch中的函数, computed中的函数, 他们的this是Vue实例</li></ol></li> <li>VueComponent的实例对象, 以后简称为vc(也可称为组件实例对象); Vue的实例对象, 以后简称为vm</li> <li>vc有的功能vm都有; vm有的el绑定后决定为哪一个实例服务,这块vc没有</li></ol></div> <h3 id="_5-2-一个重要内置关系的理解"><a href="#_5-2-一个重要内置关系的理解" class="header-anchor">#</a> 5.2 一个重要内置关系的理解</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <ol><li>内置关系:  VueComponent.prototype.proto === Vue.prototype</li> <li>为什么要有这个关系? <br>
让组件实例对象 (vc) 可以访问到Vue原型上的属性和方法;</li></ol></div> <h2 id="_6-单文件组件"><a href="#_6-单文件组件" class="header-anchor">#</a> 6. 单文件组件</h2> <div class="custom-block danger"><p class="custom-block-title">重点来了</p> <p>Vue工程化开发, 基本都采用单文件组件</p></div> <h3 id="_6-1-单文件组件命名"><a href="#_6-1-单文件组件命名" class="header-anchor">#</a> 6.1 单文件组件命名</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <ol><li>一个vue文件就是一个组件 和vue组件命名一样</li> <li>单个单词, 常用 School.vue 命名</li> <li>多个单词, 常用 MySchool.vue 命名</li></ol></div> <h3 id="_6-2-app-vue"><a href="#_6-2-app-vue" class="header-anchor">#</a> 6.2 App.vue</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>App组件是汇总所有组件的</p></div> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./assets/logo.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>School</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>School</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Student</span><span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// 引入组件</span>
<span class="token keyword">import</span> School <span class="token keyword">from</span> <span class="token string">&quot;./components/School&quot;</span>
<span class="token keyword">import</span> Student <span class="token keyword">from</span> <span class="token string">&quot;./components/Student&quot;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;App&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span><span class="token punctuation">{</span>
    School<span class="token punctuation">,</span>
    Student
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="_6-3-school-vue"><a href="#_6-3-school-vue" class="header-anchor">#</a> 6.3 School.vue</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--组件的结构,template标签不参与结构编译--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>姓名: {{studentName}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>年龄: {{studentAge}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点我提示名称<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token comment">// 交互相关的代码(数据, 方法等)</span>
  <span class="token comment">// 暴露方法一:  export const school 分别暴露</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'School'</span><span class="token punctuation">,</span> <span class="token comment">//给组件取一个名字, 呈现在开发者工具上, 一般和文件名保持一致</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">studentName</span><span class="token operator">:</span><span class="token string">'张三'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">studentAge</span><span class="token operator">:</span><span class="token number">20</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token function">showName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>studentName<span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token comment">//  暴露给别人引用 三种暴露, 选择一种暴露方式, 但一般选择默认暴露</span>
  <span class="token comment">//  暴露方法二:  统一暴露</span>
  <span class="token comment">// export {school}</span>
  <span class="token comment">//  暴露方法三:  默认暴露</span>
  <span class="token comment">// export default school</span>

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token comment">/*组件的样式*/</span>
  <span class="token selector">.demo</span><span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> blueviolet<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br></div></div><h3 id="_6-4-student-vue"><a href="#_6-4-student-vue" class="header-anchor">#</a> 6.4 Student.vue</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--组件的结构,template标签不参与结构编译--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>学生姓名: {{studentName}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>学生年龄: {{studentAge}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token comment">// 交互相关的代码(数据, 方法等)</span>
  <span class="token comment">// 暴露方法一:  export const school 分别暴露</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'Student'</span><span class="token punctuation">,</span> <span class="token comment">//给组件取一个名字, 呈现在开发者工具上, 一般和文件名保持一致</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">studentName</span><span class="token operator">:</span><span class="token string">'王五'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">studentAge</span><span class="token operator">:</span><span class="token number">30</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token comment">/*组件的样式,样式没有可以不写*/</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="_6-5-main-js"><a href="#_6-5-main-js" class="header-anchor">#</a> 6.5 main.js</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code>/*
* 该文件是整个项目的入口文件
* */
// 引入vue
import Vue from 'vue'
//  引入App组件, 它是所有组件的父组件
import App from './App.vue'
//  关闭vue的生产提示
Vue.config.productionTip = false

//  创建vue实例对象---vm
new Vue({
    //  下面这行代码下节解释, 完成了这个功能: 将App组件放入容器(#app)中
    render: h =&gt; h(App),
}).$mount('#app')
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="_6-6-index-html"><a href="#_6-6-index-html" class="header-anchor">#</a> 6.6 index.html</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--      
针对IE浏览器的一个特殊配置, 含义是让IE浏览器以最高的渲染级别渲染页面,
 vue不支持IE8及以下版本,加上也不不能解决实质上的问题
 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 开启移动端的理想视口     --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width,initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--  页签图标  &lt;%= BASE_URL %&gt;指的是public目录所在的路径  --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>&lt;%= BASE_URL %&gt;favicon.ico<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--    &lt;link rel=&quot;icon&quot; href=&quot;./favicon.ico&quot;&gt;--&gt;</span>
<span class="token comment">&lt;!--      配置网页的标题--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>&lt;%= htmlWebpackPlugin.options.title %&gt;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--  &lt;noscript&gt; 表示如果浏览器不支持js, 标签里面的话就会出现在
页面上, 如果浏览器支持, 里面内容不会渲染
--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>noscript</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>We're sorry but &lt;%= htmlWebpackPlugin.options.title %&gt; 
         doesn't work properly without JavaScript enabled. Please en
         able it to continue.
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>noscript</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--容器--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- built files will be auto injected --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><h2 id="_7-vue脚手架-vue-cli"><a href="#_7-vue脚手架-vue-cli" class="header-anchor">#</a> 7. <a href="https://cli.vuejs.org/zh/guide/" target="_blank" rel="noopener noreferrer">Vue脚手架(Vue-cli)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h2> <div class="custom-block tip"><p class="custom-block-title">提示</p> <ol><li>Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统</li> <li>一般都用最新版本, 它向下兼容</li> <li>Vue脚手架是Vue提供的标准化开发工具(开发平台);</li> <li>Vue脚手架指的就是Vue-cli</li> <li>如出现下载缓慢, 请配置npm淘宝镜像 npm config set registry https://registry.npm.taobao.org</li></ol></div> <h3 id="_7-1-安装vue-cli"><a href="#_7-1-安装vue-cli" class="header-anchor">#</a> 7.1 安装vue-cli</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>第一次使用需要安装,安装之后, 电脑里面就多了一个命令vue</p></div> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> <span class="token function">install</span> -g @vue/cli
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><font color="blue">检查当前Vue的版本</font></p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code>vue --version
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><font color="blue">&gt;检查当前Vue的版本可简写为</font></p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code>vue -V
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_7-2-创建项目"><a href="#_7-2-创建项目" class="header-anchor">#</a> 7.2 创建项目</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <ol><li>babel: ES6转换ES5使用的</li> <li>eslint: 检查语法的</li> <li>下面命令中的<code>XXX</code>是项目目录名称</li> <li>Vue脚手架隐藏了所有webpack相关的配置, 若想查看具体的webpack配置, 请执行: vue inspect &gt; output.js</li></ol></div> <p><font color="red">切换到你要创建项目的目录</font>, 然后使用命令创建项目,执行:</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code>vue create XXX
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_7-3-启动项目"><a href="#_7-3-启动项目" class="header-anchor">#</a> 7.3 启动项目</h3> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code>npn run serve
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_7-4-升级全局的vue-cli"><a href="#_7-4-升级全局的vue-cli" class="header-anchor">#</a> 7.4  升级全局的Vue-cli</h3> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> update -g @vue/cli
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="_8-项目目录文件介绍"><a href="#_8-项目目录文件介绍" class="header-anchor">#</a> 8. 项目目录文件介绍</h2> <h3 id="_8-1-gitignore文件"><a href="#_8-1-gitignore文件" class="header-anchor">#</a> 8.1 <code>.gitignore</code>文件</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>git的忽略文件</p></div> <h3 id="_8-2-babel-config-js文件"><a href="#_8-2-babel-config-js文件" class="header-anchor">#</a> 8.2 <code>babel.config.js</code>文件</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>babel的配置文件, es6转es5 babel;</p></div> <h3 id="_8-3-package-json文件"><a href="#_8-3-package-json文件" class="header-anchor">#</a> 8.3 <code>package.json</code>文件</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>包的说明书</p></div> <div class="language-text line-numbers-mode"><pre class="language-text"><code> &quot;scripts&quot;: {
    // 配置一个服务,就是npn run serve的命令 
    &quot;serve&quot;: &quot;vue-cli-service serve&quot;, 
    // 构建, 所有功能写完了, 编译构建 
    &quot;build&quot;: &quot;vue-cli-service build&quot;, 
    // 写的代码全部进行语法检查, 一般不用       
    &quot;lint&quot;: &quot;vue-cli-service lint&quot; 
  },
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="_8-4-package-lock-json文件"><a href="#_8-4-package-lock-json文件" class="header-anchor">#</a> 8.4 <code>package-lock.json</code>文件</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>包版本控制文件, 能然我们最快速度安装指定版本, 没有的话, 可能就会版本发生变化, 下载到最新的, 一般不能删除</p></div> <h3 id="_8-5-readme-md文件"><a href="#_8-5-readme-md文件" class="header-anchor">#</a> 8.5 <code>README.md</code>文件</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>对整个项目进行说明, 怎么使用等等</p></div> <h3 id="_8-6-src-main-js文件"><a href="#_8-6-src-main-js文件" class="header-anchor">#</a> 8.6 <code>src/main.js</code>文件</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>一切的开端, 运行npn run serve后, 立马就会执行这个文件</p></div> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">/*
* 该文件是整个项目的入口文件
* */</span>
<span class="token comment">// 引入vue</span>
<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token comment">//  引入App组件, 它是所有组件的父组件</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span>
<span class="token comment">//  关闭vue的生产提示</span>
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span>

<span class="token comment">//  创建vue实例对象---vm</span>
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">//  下面这行代码下节解释, 完成了这个功能: 将App组件放入容器(#app)中</span>
  <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>

<span class="token comment">// 也可以下面这样写</span>
<span class="token comment">/*
  new Vue({
    el:&quot;#app&quot;,
    //  下面这行代码下节解释, 完成了这个功能: 将App组件放入容器(#app)中
    render: h =&gt; h(App),
  })
 */</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="_8-7-src-app-vue文件"><a href="#_8-7-src-app-vue文件" class="header-anchor">#</a> 8.7 <code>src/App.vue</code>文件</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>父组件</p></div> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vue logo<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./assets/logo.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HelloWorld</span> <span class="token attr-name">msg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Welcome to Your Vue.js App<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> HelloWorld <span class="token keyword">from</span> <span class="token string">'./components/HelloWorld.vue'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'App'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    HelloWorld
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">#app</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> Avenir<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
  <span class="token property">-webkit-font-smoothing</span><span class="token punctuation">:</span> antialiased<span class="token punctuation">;</span>
  <span class="token property">-moz-osx-font-smoothing</span><span class="token punctuation">:</span> grayscale<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #2c3e50<span class="token punctuation">;</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h3 id="_8-8-assets文件夹"><a href="#_8-8-assets文件夹" class="header-anchor">#</a> 8.8 <code>assets</code>文件夹</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>一般存放静态资源, logo图, 小视频, 图片等</p></div> <h3 id="_8-9-components文件夹"><a href="#_8-9-components文件夹" class="header-anchor">#</a> 8.9 <code>components</code>文件夹</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>开发中的组件都往这里面放, 除了App.vue这个父组件</p></div> <h3 id="_8-10-public-index-html文件"><a href="#_8-10-public-index-html文件" class="header-anchor">#</a> 8.10 <code>public/index.html</code>文件</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>整个项目的页面, vue是单页面应用</p></div> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--   针对IE浏览器的一个特殊配置, 含义是让IE浏览器以最高的渲染级别渲染页面,
       vue不支持IE8及以下版本,加上也不不能解决实质上的问题--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 开启移动端的理想视口     --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width,initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--  页签图标  &lt;%= BASE_URL %&gt;指的是public目录所在的路径  --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>&lt;%= BASE_URL %&gt;favicon.ico<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--    &lt;link rel=&quot;icon&quot; href=&quot;./favicon.ico&quot;&gt;--&gt;</span>
<span class="token comment">&lt;!--      配置网页的标题--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>&lt;%= htmlWebpackPlugin.options.title %&gt;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--  &lt;noscript&gt; 表示如果浏览器不支持js, 标签里面的话就会出现在页面上,
      如果浏览器支持, 里面内容不会渲染
  --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>noscript</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>We're sorry but &lt;%= htmlWebpackPlugin.options.title %&gt; doesn't
       work properly without JavaScript enabled. Please enable it to continue.
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>noscript</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--容器--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- built files will be auto injected --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h2 id="_9-render函数"><a href="#_9-render函数" class="header-anchor">#</a> 9. render函数</h2> <h3 id="_9-1-关于不同版本的vue"><a href="#_9-1-关于不同版本的vue" class="header-anchor">#</a> 9.1 关于不同版本的Vue</h3> <div class="custom-block tip"><p class="custom-block-title">提示</p> <ol><li>Vue.js和Vue.runtime.xxx.js的区别:
<ol><li>vue.js是完整版的Vue, 包含: 核心功能 + 模板解析器</li> <li>vue.runtime.xxx.js是运行版的Vue, 只包含: 核心功能, 没有模板解析器</li></ol></li> <li>因为vue.runtime.xxx.js没有模板解析器, 所以不能使用template配置项, 需要使用render函数接收到的createElement函数去指定具体内容</li></ol></div> <h3 id="_9-2-示例说明main-js中render函数"><a href="#_9-2-示例说明main-js中render函数" class="header-anchor">#</a> 9.2 示例说明<code>main.js</code>中render函数</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code>/*
* 该文件是整个项目的入口文件
* */
// 引入vue
import Vue from 'vue'
//  引入App组件, 它是所有组件的父组件
import App from './App.vue'
//  关闭vue的生产提示
Vue.config.productionTip = false

//  创建vue实例对象---vm
new Vue({
    //  下面这行代码下节解释, 完成了这个功能: 将App组件放入容器(#app)中
    render: h =&gt; h(App),
    /* render是一个函数, vue帮我们调用, 调用的时候传递了
      一个createElement函数, 这个函数可以创建具体的元素和内容
    */
    // render(createElement){
    //     return createElement('h1','您好啊')
    // }
    // render:createElement =&gt; createElement('h1','您好啊')
    // render:h =&gt; h('h1','您好啊')
}).$mount('#app')
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h2 id="_10-全局cli配置"><a href="#_10-全局cli配置" class="header-anchor">#</a> 10. <a href="https://cli.vuejs.org/zh/config/#vue-config-js" target="_blank" rel="noopener noreferrer">全局CLI配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h2> <div class="custom-block tip"><p class="custom-block-title">记要</p> <ol><li>网站的页签图标 <code>favicon.ico</code>, 固定名字, 不能随便更改</li> <li>配置参考, 这些配置可改
<ol><li><code>vue.config.js</code>是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 <code>@vue/cli-service</code> 自动加载。你也可以使用 <code>package.json</code> 中的 <code>vue</code> 字段，但是注意这种写法需要你严格遵照 <code>JSON</code> 的格式来写。</li> <li>使用<code>vue inspect &gt; output.js</code> 可以查看到Vue脚手架的默认配置, 但修改不会生效</li> <li>使用<code>vue.config.js</code>可以对脚手架进行个性化定制</li></ol></li></ol></div> <div class="language-html line-numbers-mode"><pre class="language-html"><code>/* 
   1. `vue.config.js`  可选配置文件, 不存在就是使用默认配置文件;
   2. 这里面写的配置, 会被脚手架自动加载, 然后编译的时候自动替换
       调默认配置文件, 不会给我们核心配置;
   3. 删除这个文件就是使用默认配置,这个文件只要修改了, 就要重启才会生效
*/
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
    // 选项...
    pages:{
        /* 
          不能写了配置再注视掉, 如果注释掉了, 只要存在这个配置, 就会替换默认的, 
          然后注释了, 就会报错, 本例子注释就是错误的, 要么就不写
        */
        // index:{
        //     //入口
        //     entry:'src/main.js',
        // }
    },
   //关闭语法检查, 如果不关闭, 代码有问题, 会报错, 启动不了
    lintOnSave:false 
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><div class="custom-block danger"><p class="custom-block-title">注意了</p> <p>vue.config.js中, 不能写了配置再注视掉, 如果注释掉了, 只要存在这个配置, 就会替换默认的,  然后注释了, 就会报错, 上面子注释就是错误的, 要么就不写这个配置, 直接读取默认的!</p></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">4/8/2022, 10:21:12 AM</span></div></footer> <!----> </main></div><div class="global-ui"><!----><!----><!----></div></div>
    <script src="/blog/assets/js/app.160d1732.js" defer></script><script src="/blog/assets/js/2.553eb4dc.js" defer></script><script src="/blog/assets/js/29.6df73fc7.js" defer></script><script src="/blog/assets/js/3.4c6b6694.js" defer></script>
  </body>
</html>
